<!--
    Document    : index
    Created on  : 08-04-2014, 09:22:16
    Author      : Mr. Truong Khuong
    Phone       : 0985 747 240
    Email       : Khuongxuantruong@gmail.com
    Skype       : Khuongxuantruong
-->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
        <link href="../css/bootstrap.min.css" rel="stylesheet">
        <link href="../moodycrab/moodycrab.css" rel="stylesheet">
        <script src="../js/jquery-1.9.1.min.js"></script>
        <script src="../js/bootstrap.min.js"></script>
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
            <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body>
        <header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
            <div class="container">
                <div class="navbar-header visible-xs">
                    <button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar line-1"></span>
                        <span class="icon-bar line-2"></span>
                        <span class="icon-bar line-3"></span>
                    </button>
                    <a href="/home" class="navbar-brand">
                        <img src="images/logo.jpg"/>
                    </a>
                </div>
                <nav class="collapse navbar-collapse bs-navbar-collapse" role="navigation" >
                    <ul class="nav navbar-nav">

                        <li class="active"><a href='index.html'>HOME</a></li>
                        <li class=""><a href='work.html'>WORK</a></li>
                    </ul>

                    <a href="/home">
                        <img class="logo hidden-xs" src="images/logo.jpg"/>
                    </a>
                    <ul class="nav navbar-nav navbar-right">
                        <li class=""><a href='about.html'>ABOUT</a></li>
                        <li><a href='contact.html'>CONTACT</a></li>
                    </ul>
                </nav>
            </div>
        </header>
        <div  class="container" style="position: relative;z-index: 1">
            <div class="slogan">
                A GOOD PIECE OF COMMUNICATION
                STARTS A CONVERSATION
            </div>
            <div class="row" style="padding-bottom: 120px">
                <div class="col-md-3 col-xs-6 square-item">
                    <a href="about.html">
                        <div class="nailthumb bbr">
                            <div class="nailthumb-figure square">
                                <div class="nailthumb-container">
                                    <img class="nailthumb-image" src="images/1.jpg" >
                                </div>
								<div class="nailthumb-mark"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item">
                    <a href="work-detail.html">
                    <div class="nailthumb">
                        <div class="nailthumb-figure square">
                            <div class="nailthumb-container">
                                <img class="nailthumb-image" src="images/2.jpg" >
                            </div>
							<div class="nailthumb-mark"></div>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6  square-item">
                    <a href="contract.html">
                        <div class="nailthumb">
                            <div class="nailthumb-figure square">
                                <div class="nailthumb-container">
                                    <img class="nailthumb-image" src="images/3.jpg" >
                                </div>
								<div class="nailthumb-mark"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item">
                    <a href="work-detail.html">
                    <div class="nailthumb">
                        <div class="nailthumb-figure square">
                            <div class="nailthumb-container">
                                <img class="nailthumb-image" src="images/4.jpg" >
                            </div>
							<div class="nailthumb-mark"></div>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item">
                    <a href="work-detail.html">
                    <div class="nailthumb">
                        <div class="nailthumb-figure square">
                            <div class="nailthumb-container">
                                <img class="nailthumb-image" src="images/5.jpg" >
                            </div>
							<div class="nailthumb-mark"></div>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item ">
                    <a href="about.html">
                        <div class="nailthumb btr">
                            <div class="nailthumb-figure square">
                                <div class="nailthumb-container">
                                    <img class="nailthumb-image" src="images/6.jpg" >
                                </div>
								<div class="nailthumb-mark"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item ">
                    <a href="work-detail.html">
                    <div class="nailthumb bbr">
                        <div class="nailthumb-figure square">
                            <div class="nailthumb-container">
                                <img class="nailthumb-image" src="images/7.jpg" >
                            </div>
							<div class="nailthumb-mark"></div>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item ">
                    <a href="about.html">
                        <div class="nailthumb btl">
                            <div class="nailthumb-figure square">
                                <div class="nailthumb-container">
                                    <img class="nailthumb-image" src="images/8.jpg" >
                                </div>
								<div class="nailthumb-mark"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item ">
                    <a href="about.html">
                        <div class="nailthumb btr">
                            <div class="nailthumb-figure square">
                                <div class="nailthumb-container">
                                    <img class="nailthumb-image" src="images/10.jpg" >
                                </div>
								<div class="nailthumb-mark"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item">
                    <a href="work-detail.html">
                    <div class="nailthumb">
                        <div class="nailthumb-figure square">
                            <div class="nailthumb-container">
                                <img class="nailthumb-image" src="images/12.jpg" >
                            </div>
							<div class="nailthumb-mark"></div>
                        </div>
                    </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item">
                    <a href="about.html">
                        <div class="nailthumb btl">
                            <div class="nailthumb-figure square">
                                <div class="nailthumb-container">
                                    <img class="nailthumb-image" src="images/9.jpg" >
                                </div>
								<div class="nailthumb-mark"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="col-md-3 col-xs-6 square-item">
                    <a href="about.html">
                        <div class="nailthumb">
                            <div class="nailthumb-figure square">
                                <div class="nailthumb-container">
                                    <img class="nailthumb-image" src="images/11.jpg" >
                                </div>
								<div class="nailthumb-mark"></div>
                            </div>
                        </div>
                    </a>
                </div>
                <div class="clear"></div>
            </div>
            <div class="">
                <div style="border-bottom: 1px solid #ccc;border-top:1px solid #ccc;padding-top:20px;padding-bottom:20px">

                    <div class="col-md-4 col-xs-6 nav-item">
                        <div class="">
                            <a href="project-planner.html">
                                <div class="nailthumb">
                                    <div class="nailthumb-figure square">
                                        <div class="nailthumb-container">
                                            <img class="nailthumb-image" src="images/ico1.png" >
                                        </div>
                                    </div>
                                </div>
                                <h3>PROJECT PLANNER</h3>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-6 nav-item">
                        <div class="">
                            <a href="about.html">
                                <div class="nailthumb">
                                    <div class="nailthumb-figure square">
                                        <div class="nailthumb-container">
                                            <img class="nailthumb-image" src="images/ico2.png" >
                                        </div>
                                    </div>
                                </div>
                                <h3>CONNECT</h3>
                            </a>
                        </div>
                    </div>
                    <div class="col-md-4 col-xs-6 nav-item">
                        <div class="">
                            <a href="about.html">
                                <div class="nailthumb">
                                    <div class="nailthumb-figure square">
                                        <div class="nailthumb-container">
                                            <img class="nailthumb-image" src="images/ico3.png" >
                                        </div>
                                    </div>
                                </div>
                                <h3>NEWSLETTER</h3>
                            </a>
                        </div>
                    </div>

                    <div class="clear"></div>
                </div>
            </div>

            <div class="foot">
                <div style="border-bottom: 1px solid #ccc;padding-top:40px;padding-bottom:40px">
                    <div class="col-md-4">
                        <h3>Contact Detail</h3>
                        
                        <p>
                            <span>+ P :</span>
                            0422 925 979
                        </p>
                        <p>
                            <span>+ E :</span>
                            admin@moodycrab.com
                        </p>
                    </div>
                    <div class="col-md-8">
                        <h3>Send Us A Message</h3>
                        <div class="row">
                            <div class="col-md-6">
                                <div class="form-contact">
                                    <div class="">
                                        <input type="text" class="form-control" placeholder="Enter your name here">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <img src="images/phone-ico.jpg"/>
                                        </span>
                                        <input type="text" class="form-control" placeholder="Phone">
                                    </div>
                                    <div class="input-group">
                                        <span class="input-group-addon">
                                            <img src="images/mail-ico.jpg"/>
                                        </span>
                                        <input type="text" class="form-control" placeholder="Email">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="form-contact">
                                    <div class="">
                                        <textarea class="form-control" rows="3"></textarea>
                                    </div>
                                    <div class="" style="text-align: right;">
                                        <button type="button" class="btn btn-default">RESET</button>
                                        <button type="button" class="btn btn-danger">SUBMIT</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="clear"></div>
                </div>
                <div class="copyright">
                    Coppyright &copy; MoodyCrab 2014
                </div>
            </div>	
        </div>